<template>
  <div class="container">
    <el-card class="box-card">
        <el-form 
            ref="addFormRef" 
            :rules="addFormRules"
            :model="addForm"  
            label-width="auto">
          <el-row>
            <el-col :span="8">
              <!-- 用户名 -->
              <el-form-item label="年级" prop="level"> 
                 <el-select v-model="addForm.level" style="width:100%" @change="changeLevel">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 学科名称 -->
              <el-form-item label="学科" prop="subjectId">
                   <el-select v-model="addForm.subjectId" style="width:100%" @change="changeSubject">
                      <el-option
                        v-for="item in subjectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id+''">
                      </el-option>
                    </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="12">
                <p>知识点树</p>
                <el-tree
                  :data="knowledgeList"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.name }}</span>
                    <span>
                      <el-button
                        type="text"
                        size="mini"
                        @click="() => append(data)">
                        添加
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click="() => remove(node, data)">
                        删除
                      </el-button>
                    </span>
                  </span>
                </el-tree>
             </el-col>
          </el-row>
          <el-form>
            <el-col :span="6">
              <el-button type="success" class="btn" @click="addRoot">添加根节点</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" class="btn" @click="clearForm">重置</el-button>
            </el-col>
          </el-form>
        </el-form>
    </el-card>
    <el-dialog
      title="知识点编辑信息"
      :visible.sync="addDialogVisible"
      :modal-append-to-body="false"
      width="60%"
      @close="addDialogClosed">
      <el-form 
            ref="addFormRef" 
            :rules="addFormRules"
            :model="addForm"  
            label-width="auto">
             <!-- 真实姓名 -->
              <el-form-item label="知识点" prop="name">
                  <el-input v-model="addForm.name" style="width:100%"></el-input>
              </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="saveBtn" @click="addKnowledge">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //添加对话框的显示和隐藏
      addDialogVisible: false,
      addForm:{
        level: "",
        subjectId: "",
        name: "",
        parentid: ""
      },
      addFormRules:{
        level: [
          { required: true, message: "请选择年级", trigger: "blur" }
        ],
        //验证用户名是否合法
        subjectId: [
            { required: true, message: "请选择学科类型", trigger: "blur" }
        ],
        name:[
            { required: true, message: "请填写知识点名称", trigger: "blur" }
        ]
      },
      //年级选择
      options: [{
          value: '1',
          label: '一年级'
        }, {
          value: '2',
          label: '二年级'
        }, {
          value: '3',
          label: '三年级'
        }, {
          value: '4',
          label: '四年级'
        }, {
          value: '5',
          label: '五年级'
        }, {
          value: '6',
          label: '六年级'
        }, {
          value: '7',
          label: '初一'
        }, {
          value: '8',
          label: '初二'
        }, {
          value: '9',
          label: '初三'
        }, {
          value: '10',
          label: '高一'
        }, {
          value: '11',
          label: '高二'
        }, {
          value: '12',
          label: '高三'
        }],
        subjectList: [],
        knowledgeList:[]  //知识点树
    }
  },
  created(){
    console.log(this.koowledgeId);
    if(this.koowledgeId !== null && this.koowledgeId !== ""){
      //1、根据知识点id查询信息
      console.log(this.koowledgeId);
      this.getKnowledgeById(this.koowledgeId);
    }
  },
  computed:{
    koowledgeId(){
      return this.$store.state.knowledgeId ;
    }
  },
  methods:{
    getKnowledgeById(id){
        this.getRequest("/api/admin/knowledge/selectById/"+id).then(resp => {
          console.log(resp);
          if(resp.code == 200){
            let newObj = {
              subjectId: resp.obj[0].subjectId+'',
              level: resp.obj[0].level+''
            }
            this.addForm = newObj;
            this.changeLevel(this.addForm.level );
            this.knowledgeList = resp.obj;
          }
        })
    },
    //切换班级时
    changeLevel(value){
      this.getRequest("/api/admin/subject/listBylevel",{
        level: value
      }).then( resp => {
        if(resp && resp.code == 200){
          this.subjectList = resp.obj;
        }
      })
    },
    //切换学科
    changeSubject(value){
      this.getRequest("/api/admin/knowledge/select/"+value).then(resp=>{
        if(resp.code == 200){
          this.knowledgeList = resp.obj;
        }
      })
    },

    append(data){
      console.log(data);
      let {id} = data;
      this.addForm.parentid = id;
      this.addDialogVisible = true;
    },
    remove(node, data){
      //根据id删除节点
      this.$confirm('此操作将删除该知识点, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.deleteRequest("/api/admin/knowledge/delete/"+data.id).then(resp=>{
              if(resp.code == 200){ //禁用成功
                //重新获取知识点列表
                 this.changeSubject(this.addForm.subjectId); 
              }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消操作'
            });          
        });
    },
    //关闭对话框
    addDialogClosed(){
      this.addForm.name="";//清空name
      this.addDialogVisible = false;
    },
    addKnowledge(){
      //保存知识点操作
      this.$refs.addFormRef.validate(valid => {
        if(!valid){
          this.$message.error("请填写所有必填字段");
          return false;
        }else{
          this.postRequest("/api/admin/knowledge/edit",this.addForm).then(resp => {
            if(resp.code == 200){
              this.changeSubject(this.addForm.subjectId); //刷新知识点树
              this.addDialogVisible = false;
            }
          })
        }
      })
    },
    //添加根节点
    addRoot(){
      this.addForm.parentid = "";
      this.addDialogVisible = true;
    },
    //重置表单
    clearForm(){
      this.$refs.addFormRef.resetFields();
      this.addForm={};
      this.knowledgeList = [];
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  .box-card{
    border-radius: 10px;
    color:#1A1A1A;
    font-family: "华文楷体";
    padding: 0 0 20px 0;
    .el-col{
      padding: 0 10px;
    }
    /deep/.el-button--mini:nth-child(1){
      margin-left: 20px;
      color:#66BB6A;
    }
    /deep/.el-button--mini:nth-child(2){
      margin-left: 20px;
      color:#F56C6C;
    }
    .btn{
      margin-top: 20px;
      font-size: 12px;
      padding: 10px 18px;
    }
  }
  .saveBtn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #66BB6A;
      margin-bottom: 20px;

    }
}
</style>